import uuid
import dash
from dash import html, Input, Output, State, dcc, ALL
import feffery_antd_components as fac


app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(id='input-value-output'),

        fac.AntdDivider(isDashed=True),

        fac.AntdForm(
            [
                fac.AntdFormItem(
                    fac.AntdSpace(
                        [
                            fac.AntdInput(
                                id={
                                    'type': 'form-input',
                                    'index': 0
                                }
                            ),
                            fac.AntdButton(
                                '+',
                                id={
                                    'type': 'form-input-button',
                                    'index': 0
                                },
                                type='primary',
                                style={
                                    'width': '40px'
                                }
                            )
                        ]
                    ),
                    label='企业名称'
                )
            ],
            id='form'
        )
    ],
    style={
        'padding': '100px'
    }
)


@app.callback(
    Output('form', 'children'),
    Input(
        {
            'type': 'form-input-button',
            'index': ALL
        },
        'nClicks'
    ),
    State('form', 'children'),
    prevent_initial_call=True
)
def add_or_delete_form_item(n_clicks_list, origin_children):
    if dash.ctx.triggered_id['index'] == 0:
        new_uuid = str(uuid.uuid4())

        return [
            *origin_children,
            fac.AntdFormItem(
                fac.AntdSpace(
                    [
                        fac.AntdInput(
                            id={
                                'type': 'form-input',
                                'index': new_uuid
                            }
                        ),
                        fac.AntdButton(
                            '-',
                            id={
                                'type': 'form-input-button',
                                'index': new_uuid
                            },
                            type='primary',
                            danger=True,
                            style={
                                'width': '40px'
                            }
                        )
                    ]
                ),
                label='企业名称'
            )
        ]

    else:
        current_index = dash.ctx.triggered_id['index']

        return [
            child for child in origin_children
            if child['props']['children']['props']['children'][0]['props']['id']['index'] != current_index
        ]


@app.callback(
    Output('input-value-output', 'children'),
    Input(
        {
            'type': 'form-input',
            'index': ALL
        },
        'value'
    )
)
def update_current_input_value(input_value_list):
    if any(input_value_list):
        return '已填写输入框value值：{}'.format([v for v in input_value_list if v])

    return '当前暂无已填写输入框'


if __name__ == '__main__':
    app.run(debug=True)
